<template>
	<view class="order-page">
		<!-- 顶部品牌栏 -->
		<view class="brand-header">
			<view class="header-right">
				<text class="iconfont icon-more"></text>
				<text class="iconfont icon-scan"></text>
			</view>
		</view>

		<!-- 分类选择区域 -->
		<view class="category-section">
			<view class="category-item" :class="{ active: selectedCategory === item.id }" v-for="(item, index) in categories" :key="index" @tap="selectCategory(item)">
				<view class="category-card" :style="{ backgroundColor: item.bgColor }">
					<image class="category-icon" :src="globalConfig.site_url + item.image" mode="aspectFit"></image>
				</view>
				<text class="category-name">{{ item.name }}</text>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-container">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="搜索门店名称/包厢名称" v-model="searchKeyword" @input="onSearchInput" />
			</view>
		</view>

		<!-- 状态筛选标签 -->
		<view class="filter-tabs">
			<scroll-view scroll-x class="tabs-container">
				<view class="tab-item" :class="{ active: currentStatus === item.status }" v-for="(item, index) in statusTabs" :key="index" @tap="selectStatus(item.status)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>

		<!-- 修复后的滚动区域 -->
		<scroll-view
			class="scroll-area"
			scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			:lower-threshold="100"
			:refresher-threshold="45"
			:scroll-top="scrollTop"
		>
			<!-- 有订单数据时显示列表 -->
			<view class="order-list" v-if="orderList.length > 0">
				<view class="order-card" v-for="(order, index) in orderList" :key="order.id" @tap="goToOrderDetail(order)">
					<!-- 订单头部信息 -->
					<view class="order-header">
						<view class="shop-info">
							<text class="shop-icon">🏪</text>
							<text class="shop-name">{{ order.shopName }}</text>
						</view>
						<view class="order-status" :class="'status-' + order.status">
							{{ getStatusText(order.status) }}
						</view>
					</view>

					<!-- 订单主要内容 -->
					<view class="order-body">
						<image class="room-image" :src="order.roomImage" mode="aspectFill"></image>
						<view class="order-details">
							<text class="room-name">{{ order.roomName }}</text>
							<text class="booking-time">{{ order.startTime }} - {{ order.endTime }}</text>
							<text class="package-info">{{ order.packageName }} · {{ order.categoryName }} x {{ order.num }}</text>
						</view>
					</view>

					<!-- 订单底部操作区 -->
					<view class="order-footer">
						<view class="price-info">
							<text class="price-label">实付金额：</text>
							<text class="price-value">¥{{ order.totalAmount }}</text>
						</view>
						<view class="action-buttons">
							<button v-if="order.status == 1" class="action-btn cancel-btn" @tap.stop="handleCancelOrder(order)">取消订单</button>
							<button v-if="order.status == 1 || order.status == 2" class="action-btn detail-btn" @tap.stop="handleOpenDoor(order)">开门</button>
							<button v-if="order.status == 2" class="action-btn detail-btn" @tap.stop="handleOvertime(order)">续时1小时</button>
							<button v-if="order.status != 1 && order.status != 2" class="action-btn detail-btn" @tap.stop="goToOrderDetail(order)">查看详情</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态页面 -->
			<view class="empty-state" v-else-if="!isLoading && !isFirstLoad">
				<image class="empty-icon" src="/static/images/empty-order.png" mode="aspectFit"></image>
				<text class="empty-text">暂无订单数据</text>
				<text class="empty-desc">快去预订您喜欢的房间吧~</text>
			</view>

			<!-- 加载更多提示 -->
			<view class="load-more-tip" v-if="orderList.length > 0">
				<view class="loading-wrapper" v-if="isLoadingMore">
					<view class="loading-spinner"></view>
					<text class="tip-text">正在加载更多...</text>
				</view>
				<text class="tip-text" v-else-if="hasMore">上拉加载更多</text>
				<text class="tip-text no-more" v-else>— 没有更多数据了 —</text>
			</view>

			<!-- 首次加载提示 -->
			<view class="loading-tip" v-if="isFirstLoad">
				<view class="loading-wrapper">
					<view class="loading-spinner"></view>
					<text class="tip-text">加载中...</text>
				</view>
			</view>
		</scroll-view>

		<!-- uView登录弹窗 -->
		<u-popup v-model="showLoginPopup" mode="center" border-radius="16" width="600rpx" :mask-close-able="true" @close="closeLoginPopup">
			<view class="login-popup">
				<view class="popup-header">
					<view class="popup-title">登录</view>
					<view class="popup-close" @click="closeLoginPopup">
						<u-icon name="close" color="#999" size="20"></u-icon>
					</view>
				</view>

				<view class="login-methods">
					<u-button type="success" shape="round" :loading="wechatLoading" :disabled="!agreePolicy" @click="handleWechatLogin" :custom-style="wechatBtnStyle">
						<u-icon name="weixin-fill" color="#fff" size="20" style="margin-right: 10rpx"></u-icon>
						{{ wechatLoading ? '登录中...' : '微信一键登录' }}
					</u-button>

					<!-- <u-button 
            type="primary" 
            shape="round" 
            plain
            @click="handlePhoneLogin"
            :custom-style="phoneBtnStyle"
          >
            <u-icon name="phone" color="#0066ff" size="20" style="margin-right: 10rpx;"></u-icon>
            手机号登录
          </u-button> -->
				</view>

				<view class="login-tips">
					<u-checkbox v-model="agreePolicy" shape="circle" active-color="#007aff" :size="32" style="margin-right: 10rpx;" />
					<text class="tips-text">我已阅读并同意</text>
					<text class="link-text" @click="showPrivacy('agreement')">《用户协议》</text>
					<text class="tips-text">和</text>
					<text class="link-text" @click="showPrivacy('policy')">《隐私政策》</text>
				</view>
			</view>
		</u-popup>

		<!-- 支付方式选择弹窗 -->
		<u-popup v-model="showPayTypePopup" mode="center" border-radius="16" width="500rpx" :mask-close-able="true">
			<view class="pay-type-popup">
				<view class="popup-title">请选择支付方式</view>
				<view class="pay-type-btns">
					<button class="pay-type-btn wx" @tap="handlePayType(1)">微信支付</button>
					<button class="pay-type-btn balance" @tap="handlePayType(2)">余额支付</button>
				</view>
				<view class="popup-cancel" @tap="showPayTypePopup = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import request from '@/common/request.js';
import { mapGetters, mapActions, mapState } from 'vuex';
import { checkLoginStatus, getUserInfo, wechatMiniLogin, fetchUserInfo, fetchUserBalance, fetchUserVouchers, logout } from '@/common/auth.js';

export default {
	name: 'OrderList',

	data() {
		return {
			isLoggedIn: false,
			showLoginPopup: false,
			pageLoading: false,
			wechatLoading: false,
			showPayTypePopup: false, // 支付方式弹窗
			payingOrder: null, // 当前支付订单
			renewOrder: null, // 当前续时订单
			// 按钮样式
			wechatBtnStyle: {
				backgroundColor: '#07c160',
				borderColor: '#07c160',
				marginBottom: '20rpx'
			},
			agreePolicy: false,
			// 分类数据
			categories: [],
			// 状态筛选标签
			statusTabs: [
				{ name: '全部', status: '' },
				{ name: '待开始', status: 1 },
				{ name: '进行中', status: 2 },
				{ name: '已结束', status: 3 },
				{ name: '退款中', status: 4 },
				{ name: '已退款', status: 5 },
				{ name: '已过期', status: 6 }
			],

			// 当前选中状态
			selectedCategory: '',
			currentStatus: '',
			searchKeyword: '',

			// 订单列表数据
			orderList: [],

			// 分页和加载状态
			currentPage: 1,
			pageSize: 10,
			totalPages: 0,
			hasMore: true,
			isLoading: false,
			isLoadingMore: false,
			isFirstLoad: true,
			refreshing: false, // 添加下拉刷新状态
			scrollTop: 0, // 滚动位置

			// 搜索防抖定时器
			searchTimer: null,

			// 防止重复触发加载
			loadMoreLock: false
		};
	},

	computed: {
		...mapGetters(['getGaodeKey', 'getSiteName', 'getLocation', 'getConfig']),
		...mapState({
			globalConfig: (state) => state?.config || {},
			userLocation: (state) => state?.location || {}
		})
	},

	created() {
		// 每次页面显示时检查登录状态
		this.checkLoginStatus();
	},

	methods: {
		showPrivacy(type) {
			const urlKey = type === 'policy' ? 'yszc_url' : 'yhxy_url';
			const title = type === 'policy' ? '隐私政策' : '用户协议';
			if (this.globalConfig && this.globalConfig[urlKey]) {
				uni.navigateTo({
					url: `/pages/common/webview?url=${encodeURIComponent(this.globalConfig[urlKey])}&title=${encodeURIComponent(title)}`
				});
			} else {
				this.$u.toast('协议地址未配置');
			}
		},
		// 检查登录状态
		async checkLoginStatus() {
			try {
				const isLoggedIn = await checkLoginStatus();
				this.isLoggedIn = isLoggedIn;

				if (isLoggedIn) {
					this.getCategoryData();
					this.loadOrderData();
				} else {
					this.handleLogin();
				}
			} catch (error) {
				console.error('检查登录状态失败:', error);
				this.isLoggedIn = false;
			}
		},
		// 处理登录
		handleLogin() {
			if (!this.isLoggedIn) {
				this.showLoginPopup = true;
			}
		},
		// 关闭登录弹窗
		closeLoginPopup() {
			this.showLoginPopup = false;
			this.wechatLoading = false;
		},

		// 微信登录
		async handleWechatLogin() {
			if (this.wechatLoading) return;

			try {
				this.wechatLoading = true;

				// 调用微信小程序登录 - 确保函数名正确
				const result = await wechatMiniLogin(); // 这里调用wechatMiniLogin

				if (result.success) {
					this.isLoggedIn = true;
					this.userInfo = result.userInfo;
					await this.loadOrderData();
					this.getCategoryData();

					this.closeLoginPopup();
					this.$u.toast('登录成功');
				} else {
					throw new Error(result.message || '登录失败');
				}
			} catch (error) {
				console.error('微信登录失败:', error);
				this.$u.toast(error.message || '登录失败');
			} finally {
				this.wechatLoading = false;
			}
		},

		// 获取分类数据
		async getCategoryData() {
			try {
				const opts = {
					url: '/api/index/getTypeList',
					method: 'get',
					data: {}
				};

				const res = await request.httpRequest(opts);
				console.log('分类数据:', res);

				if (res && res.data && res.data.data) {
					this.categories = res.data.data;
				}
			} catch (error) {
				console.error('获取分类数据失败:', error);
			}
		},

		// 选择分类
		selectCategory(item) {
			if (this.selectedCategory === item.id) return;

			this.selectedCategory = item.id;
			this.resetPagination();
			this.loadOrderData();
		},

		// 选择状态筛选
		selectStatus(status) {
			if (this.currentStatus === status) return;

			this.currentStatus = status;
			this.resetPagination();
			this.loadOrderData();
		},

		// 搜索输入处理
		onSearchInput() {
			clearTimeout(this.searchTimer);
			this.searchTimer = setTimeout(() => {
				this.resetPagination();
				this.loadOrderData();
			}, 500);
		},

		// 重置分页状态
		resetPagination() {
			this.currentPage = 1;
			this.hasMore = true;
			this.orderList = [];
			this.totalPages = 0;
			this.isFirstLoad = true;
			this.loadMoreLock = false;
			this.scrollTop = 0; // 重置滚动位置
		},

		// 加载订单数据
		async loadOrderData(isRefresh = false, isLoadMore = false) {
			// 防止重复请求
			if (this.loadMoreLock || ((this.isLoading || this.isLoadingMore) && !isRefresh)) {
				console.log('请求被阻止：', { loadMoreLock: this.loadMoreLock, isLoading: this.isLoading, isLoadingMore: this.isLoadingMore });
				return;
			}

			// 如果是加载更多但没有更多数据，直接返回
			if (isLoadMore && !this.hasMore) {
				console.log('没有更多数据，停止加载');
				return;
			}

			try {
				// 设置锁定状态
				if (isLoadMore) {
					this.loadMoreLock = true;
				}

				// 设置加载状态
				if (isRefresh) {
					this.refreshing = true;
					this.resetPagination();
				} else if (isLoadMore) {
					this.isLoadingMore = true;
					this.currentPage += 1;
				} else {
					this.isLoading = true;
					this.isFirstLoad = true;
				}

				// 构建请求参数
				const requestParams = {
					page: this.currentPage,
					pageSize: this.pageSize,
					type_id: this.selectedCategory || '',
					status: this.currentStatus !== '' ? this.currentStatus : '',
					room_name: this.searchKeyword.trim()
				};

				console.log('请求订单数据参数:', requestParams);

				// 发送API请求
				const response = await request.httpTokenRequest({
					url: `/api/order/getOrderList?page=${this.currentPage}&type_id=${this.selectedCategory}&status=${this.currentStatus}&room_name=${encodeURIComponent(
						this.searchKeyword.trim()
					)}`,
					method: 'get'
				});

				console.log('订单数据响应:', response);

				if (response && response.data && response.data.code === 1) {
					const responseData = response.data.data;
					const newOrderList = this.processOrderData(responseData.data || []);

					// 更新分页信息
					this.totalPages = Math.ceil((responseData.total || 0) / this.pageSize);
					this.hasMore = this.currentPage < this.totalPages;

					if (isLoadMore) {
						// 加载更多：追加数据
						this.orderList = [...this.orderList, ...newOrderList];
					} else {
						// 刷新或首次加载：替换数据
						this.orderList = newOrderList;
					}

					console.log(`订单列表更新完成，当前数量: ${this.orderList.length}, 总页数: ${this.totalPages}, 当前页: ${this.currentPage}, 还有更多: ${this.hasMore}`);
				} else {
					throw new Error(response?.data?.message || response?.message || '获取订单数据失败');
				}
			} catch (error) {
				console.error('加载订单数据失败:', error);

				// 如果不是加载更多，清空列表
				if (!isLoadMore) {
					this.orderList = [];
				}

				// 如果是加载更多失败，回退页码
				if (isLoadMore && this.currentPage > 1) {
					this.currentPage -= 1;
				}

				uni.showToast({
					title: error.message || '加载失败',
					icon: 'none',
					duration: 2000
				});
			} finally {
				// 重置所有加载状态
				this.isLoading = false;
				this.isLoadingMore = false;
				this.isFirstLoad = false;
				this.refreshing = false;
				this.loadMoreLock = false;

				// 延迟重置刷新状态，确保动画完成
				if (isRefresh) {
					setTimeout(() => {
						this.refreshing = false;
					}, 500);
				}
			}
		},

		// 处理订单数据格式
		processOrderData(rawData) {
			if (!Array.isArray(rawData)) return [];

			return rawData.map((item) => ({
				id: item.id,
				orderNo: item.order_sn,
				shopName: item.agent_title || '未知店铺',
				roomName: item.room_name || '未知房间',
				roomImage: this.formatImageUrl(item.room?.images?.[0]),
				startTime: item.start_time_text || '',
				endTime: item.end_time_text || '',
				packageName: item.roompackage?.name || '标准套餐',
				categoryName: item.roompackage?.money || '娱乐',
				totalAmount: item.money || '0.00',
				status: item.status,
				num: item.num,
				createTime: item.createtime
			}));
		},

		// 格式化图片URL
		formatImageUrl(imageUrl) {
			if (!imageUrl) return '/static/images/default-room.jpg';

			if (imageUrl.startsWith('http')) {
				return imageUrl;
			}

			const baseUrl = this.globalConfig?.site_url || '';
			return `${baseUrl}${imageUrl}`;
		},

		// 获取订单状态文本
		getStatusText(status) {
			const statusMap = {
				0: '待支付',
				1: '待开始',
				2: '进行中',
				3: '已结束',
				4: '退款中',
				5: '已退款',
				6: '已过期'
			};
			return statusMap[status] || '未知状态';
		},

		// 下拉刷新 - 修复方法名
		onRefresh() {
			console.log('触发下拉刷新');
			this.loadOrderData(true, false);
		},

		// 上拉加载更多 - 修复方法名和逻辑
		loadMore() {
			console.log('=== 触发上拉加载更多 ===');
			console.log('hasMore:', this.hasMore);
			console.log('isLoadingMore:', this.isLoadingMore);
			console.log('loadMoreLock:', this.loadMoreLock);

			if (this.hasMore && !this.isLoadingMore && !this.loadMoreLock) {
				console.log('开始加载更多数据...');
				this.loadOrderData(false, true);
			} else {
				console.log('不满足加载条件，跳过');
			}
		},

		// 跳转到订单详情页
		goToOrderDetail(order) {
			console.log(order, 'goToOrderDetail');

			uni.navigateTo({
				url: `/pages/order/order-detail?id=${order.id}&orderNo=${order.orderNo}`
			});
		},

		// 处理取消订单
		async handleCancelOrder(order) {
			const result = await uni.showModal({
				title: '确认取消',
				content: '确定要取消这个订单吗？'
			});

			// if (!result.confirm) return;

			try {
				uni.showLoading({ title: '处理中...' });

				const response = await request.httpTokenRequest({
					url: '/api/order/cancel?order_id=' + order.id,
					method: 'get'
				});

				if (response && response.data && response.data.code == 1) {
					uni.showToast({
						title: '取消成功',
						icon: 'success'
					});

					// 刷新订单列表
					setTimeout(() => {
						this.loadOrderData(true, false);
					}, 1000);
				} else {
					uni.showToast({
						title: error.msg || '取消失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('取消订单失败:', error);
				uni.showToast({
					title: error.message || '取消失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		// 处理待支付订单付款（弹窗选择支付方式）
		handlePayOrderSelect(order) {
			this.payingOrder = order;
			this.showPayTypePopup = true;
		},
		// 用户选择支付方式
		async handlePayType(type) {
			this.showPayTypePopup = false;
			if (!this.payingOrder) return;
			try {
				uni.showLoading({ title: '处理中...' });
				const response = await request.httpTokenRequest({
					url: `/api/order/pay?order_id=${this.payingOrder.id}&pay_type=${type}`,
					method: 'get'
				});
				if (response && response.data && response.data.code == 1) {
					if (type == 1) {
						this.goToPay(response.data.data.pay_data);
					} else {
						uni.showToast({ title: '余额支付成功', icon: 'success' });
						setTimeout(() => {
							this.loadOrderData(true, false);
						}, 1000);
					}
				} else {
					uni.showToast({ title: response.data.msg || '支付失败', icon: 'none' });
				}
			} catch (error) {
				console.error('支付订单失败:', error);
				uni.showToast({ title: error.message || '支付失败', icon: 'none' });
			} finally {
				uni.hideLoading();
				this.payingOrder = null;
			}
		},
		// 跳转支付
		async goToPay(payData) {
			console.log('支付数据:', payData);

			try {
				uni.showLoading({
					title: '正在调起支付...'
				});

				if (payData.pay_type === 'wxpay') {
					await this.handleWechatPay(payData);
				} else {
					await this.handleWechatPay(payData);
				}
			} catch (error) {
				uni.hideLoading();
				console.error('支付失败:', error);
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				});
			}
		},
		// 微信支付处理
		async handleWechatPay(payData) {
			return new Promise((resolve, reject) => {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp || String(Date.now()),
					nonceStr: payData.nonceStr || payData.nonce_str,
					package: payData.package || payData.prepay_id,
					signType: payData.signType || 'MD5',
					paySign: payData.paySign || payData.sign,
					success: (res) => {
						uni.hideLoading();
						console.log('微信支付成功:', res);
						this.handlePaymentSuccess({
							order_no: payData.order_no || payData.out_trade_no,
							id: payData.order_id
						});
						resolve(res);
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('微信支付失败:', err);
						if (err.errMsg.includes('cancel')) {
							uni.showToast({
								title: '支付已取消',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '支付失败: ' + err.errMsg,
								icon: 'none'
							});
						}
						reject(err);
					}
				});
			});
		},

		// 处理支付成功
		handlePaymentSuccess(orderData) {
			// 清除 Vuex 中的结算数据和页面状态
			this.$store.commit('clearSettlementData');
			this.$store.commit('clearOrderData');
			this.$store.commit('clearSelectedCoupon');
			// this.clearSettlementPageState();

			uni.showToast({
				title: '支付成功！',
				icon: 'success',
				duration: 2000
			});

			// setTimeout(() => {
			// 	uni.showModal({
			// 		title: '预约成功',
			// 		content: `预约已确认！请按时到店享受服务。`,
			// 		showCancel: false,
			// 		confirmText: '查看订单',
			// 		success: () => {
			// 			uni.reLaunch({
			// 				url: '/pages/index/tabbar?page=order'
			// 			});
			// 		}
			// 	});
			// }, 2000);
		},
		// 续单服务
		async handleOvertime(order) {
			this.renewOrder = order;
			this.showPayTypePopup = true;
		},
		// 用户选择续时支付方式
		async handlePayType(type) {
			this.showPayTypePopup = false;
			if (!this.renewOrder) return;
			try {
				uni.showLoading({ title: '处理中...' });
				const response = await request.httpTokenRequest({
					url: `/api/order/renew?order_id=${this.renewOrder.id}&pay_type=${type}`,
					method: 'get'
				});
				if (response && response.data && response.data.code == 1) {
					if (type == 1) {
						// 微信支付，调起goToPay
						this.goToPay(response.data.data.pay_data);
					} else {
						// 余额支付，直接处理成功
						this.handlePaymentSuccess({
							order_no: response.data.data?.order_no || '',
							id: response.data.data?.order_id || this.renewOrder.id
						});
						setTimeout(() => {
							this.loadOrderData(true, false);
						}, 1000);
					}
				} else {
					uni.showToast({ title: response.data.msg || '续费失败', icon: 'none' });
				}
			} catch (error) {
				console.error('续费订单失败:', error);
				uni.showToast({ title: error.message || '续费失败', icon: 'none' });
			} finally {
				// uni.hideLoading();
				this.renewOrder = null;
			}
		},
		// 打开房间
		async handleOpenDoor(order) {
			const result = await uni.showModal({
				title: '确认打开',
				content: '确定要打开这个订单的房间吗？'
			});
			// console.log(result);
			// if (!result.confirm) return;

			try {
				uni.showLoading({ title: '处理中...' });

				const response = await request.httpTokenRequest({
					url: '/api/order/openDoor?order_id=' + order.id,
					method: 'get'
				});

				if (response && response.data && response.data.code == 1) {
					uni.showToast({
						title: '房间已开启',
						icon: 'success'
					});

					// 刷新订单列表
					setTimeout(() => {
						this.loadOrderData(true, false);
					}, 1000);
				} else {
					uni.showToast({
						title: response.data.msg || '打开失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('房间打开失败:', error);
			} finally {
				// uni.hideLoading();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.order-page {
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.brand-header {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	padding-top: 118rpx;
	flex-shrink: 0;

	.header-right {
		margin-left: auto;

		.iconfont {
			margin-left: 30rpx;
			font-size: 40rpx;
		}
	}
}

/* 分类选择区域 */
.category-section {
	display: flex;
	padding: 30rpx;
	background: #fff;
	gap: 20rpx;
	flex-shrink: 0;
}

.category-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.category-card {
	position: relative;
	width: 120rpx;
	height: 120rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
	background: #f5f5f5;
}

.category-icon {
	width: 60rpx;
	height: 60rpx;
}

.category-name {
	font-size: 28rpx;
	color: #333;
}

.category-item.active .category-name {
	color: #4285f4;
	font-weight: 500;
}

/* 搜索框区域 */
.search-section {
	padding: 0 30rpx 30rpx;
	background: #fff;
	flex-shrink: 0;
}

.search-container {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 50rpx;
	padding: 0 30rpx;
	height: 80rpx;
}

.search-icon {
	font-size: 28rpx;
	color: #999;
	margin-right: 16rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

/* 状态筛选标签 */
.filter-tabs {
	background: #fff;
	margin-bottom: 20rpx;
	flex-shrink: 0;
}

.tabs-container {
	padding: 0 30rpx;
	white-space: nowrap;
}

.tab-item {
	display: inline-block;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	color: #666;
	border-radius: 50rpx;
	margin-right: 20rpx;
	transition: all 0.3s;
}

.tab-item.active {
	background: #4285f4;
	color: #fff;
}

/* 滚动区域 - 关键修复 */
.scroll-area {
	flex: 1;
	height: 0;
	/* 关键：设置为0让flex生效 */
	padding: 0 30rpx;
	box-sizing: border-box;
}

/* 订单列表 */
.order-list {
	padding-bottom: 40rpx;
}

.order-card {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 订单头部 */
.order-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.shop-info {
	display: flex;
	align-items: center;
}

.shop-icon {
	font-size: 28rpx;
	margin-right: 12rpx;
}

.shop-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.order-status {
	font-size: 28rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.status-0 {
	background: #ffeaa7;
	color: #d63031;
}

.status-1 {
	background: #fff3cd;
	color: #856404;
}

.status-2 {
	background: #d4edda;
	color: #155724;
}

.status-3 {
	background: #d1ecf1;
	color: #0c5460;
}

.status-4 {
	background: #f8d7da;
	color: #721c24;
}

.status-5 {
	background: #e2e3e5;
	color: #383d41;
}

.status-6 {
	background: #f8d7da;
	color: #721c24;
}

/* 订单主体内容 */
.order-body {
	display: flex;
	padding: 30rpx;
}

.room-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-right: 24rpx;
}

.order-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.room-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 12rpx;
}

.booking-time {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.package-info {
	font-size: 24rpx;
	color: #999;
}

/* 订单底部操作区 */
.order-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-top: 1rpx solid #f0f0f0;
}

.price-info {
	display: flex;
	align-items: center;
}

.price-label {
	font-size: 28rpx;
	color: #666;
}

.price-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff6b6b;
	margin-left: 8rpx;
}

.action-buttons {
	display: flex;
	gap: 16rpx;
}

.action-btn {
	padding: 0rpx 24rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	border: none;
}

.cancel-btn {
	background: #f5f5f5;
	color: #666;
}

.pay-btn {
	background: #ff6b6b;
	color: #fff;
}

.detail-btn {
	background: #4285f4;
	color: #fff;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 30rpx;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 16rpx;
}

.empty-desc {
	font-size: 28rpx;
	color: #999;
}

/* 加载提示 */
.load-more-tip,
.loading-tip {
	padding: 30rpx;
	text-align: center;
}

.loading-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
}

.loading-spinner {
	width: 32rpx;
	height: 32rpx;
	border: 3rpx solid #f3f3f3;
	border-top: 3rpx solid #4285f4;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.tip-text {
	font-size: 24rpx;
	color: #999;
}

.tip-text.no-more {
	color: #ccc;
	font-style: italic;
}

.login-popup {
	padding: 40rpx;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.popup-close {
			padding: 10rpx;
		}
	}

	.login-methods {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.login-tips {
		text-align: center;
		font-size: 24rpx;
		color: #999;

		.tips-text {
			color: #999;
		}

		.link-text {
			color: #0066ff;
			text-decoration: underline;
		}
	}
}

.pay-type-popup {
	padding: 40rpx 20rpx;
	text-align: center;

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.pay-type-btns {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		margin-bottom: 30rpx;

		.pay-type-btn {
			font-size: 30rpx;
			border-radius: 12rpx;
			padding: 24rpx 0;
			border: none;
		}

		.wx {
			background: #07c160;
			color: #fff;
			width: 100%;
		}

		.balance {
			background: #4285f4;
			color: #fff;
			width: 100%;
		}
	}

	.popup-cancel {
		color: #999;
		font-size: 28rpx;
		margin-top: 10rpx;
	}
}
</style>
